import React from 'react';
import {
  Form,
  Input,
  Button,
  Table,
  Icon,
  Radio,
  InputNumber,
  Checkbox,
  Modal,
  message,
  notification,
  Affix,
  Upload,
  Select,
  Menu,
  Dropdown
} from 'antd';

import InnerTable from 'components/DBTable/InnerTable.js';
import ajax from '../../../utils/ajax';

const FormItem = Form.Item;
const ButtonGroup = Button.Group;
const Option = Select.Option;

var _this;

/**
 * 内部表格组件
 */
class ImageManageInnerTable extends InnerTable {

  /**
   * 构造器，好像是用来初始化的？
   * @param props
   */
  constructor(props) {
    super(props);
    this.state = {
      ...this.state,
      upOpt: ['OPTION_IMAGE', 'OPTION_SAVE'],
      moduleName: 'imagemanage'
    }
    // 0 返回file和image 
    // 1 file 
    // 2 image
    this.responseStatus = 2;
    this.isDisabledRadio = true;
  }

  onClickView = (e) =>{
    // console.log("点击查看啦");
    e.preventDefault();
    this.resetFields();
    // console.log("this.state 里面的数据是", this.state);
    let selectedRowsPop = this.state.selectedRows[0];
    
    console.log("selectedRowsPop 里面的数据是", selectedRowsPop);

    
    // console.log("this.props.form 里面的数据是", this.props.form.getFieldsValue);
    if(selectedRowsPop){
      let defaultFileObj = [];
      let defaultFileItem = {};
      defaultFileItem.uid = selectedRowsPop.id;
      defaultFileItem.size = selectedRowsPop.size;
      defaultFileItem.key = selectedRowsPop.key;
      defaultFileItem.imgUrl = selectedRowsPop.imgUrl;
      defaultFileItem.width = selectedRowsPop.width + '*' + selectedRowsPop.height;
      defaultFileObj.push(defaultFileItem);

      this.setState({fileObjs : defaultFileObj});
    }

    var state={ modalVisible: true, modalTitle: '查看', modalState: this.modalActionState.View,modalForm:true};

    this.setState(state,()=>{
      this.props.look(selectedRowsPop);
      // this.props.form.setFieldsValue(selectedRowsPop);
    });
  }

  /**
   * 这里好像是用来配置那些按钮之类的
   * @returns {Array}
   */
  prepareBeforeToolBar = function () {
    let isButtondisabled = false;

    if (this.state.selectedRowKeys.length > 0) {  // 是否选择
      isButtondisabled = true;
    }

    if (this.state.selectedRowKeys.length > 1) {  // 是否选择了多项
      isButtondisabled = false;
    }

    //上面是选择框的那个配置
    var items = [];
    const menu = (
      <Menu onClick={this.onClickUpLoadPicture}>
        <Menu.Item key="1">保存到数据库</Menu.Item>
        <Menu.Item key="2">不保存到数据库</Menu.Item>
      </Menu>
    );

    items.push(
      <Dropdown overlay={menu} key="upImg">
        <Button key='audioUpBtn' type="primary">
          <Icon type="edit"/>上传图片
        </Button>
      </Dropdown>
    );
    items.push(<Button key='look' onClick={this.onClickView} disabled={!isButtondisabled} ><Icon type="info-circle-o" />查看</Button>);

    return items;
  }
  handleModalOk = () => {
    this.setState({ modalVisible: false });
    this.props.refresh();
  }
  prepareModalInfo = () => {
    // 生成表单项
    const formItems = [];
    this.props.formSchema.forEach((field) => {
      if(this.enableFieldToFrom(field))
      {
          var converter = this.getConverter();
          this.preDealData(this.state.resData, field);
          formItems.push(converter.convert(this, field));
      }
    });
    return (<div className="innerTableCon"><Form layout="horizontal">{formItems}</Form></div>);
  }

  onClickUpLoadPicture = (e) =>{
    delete this.state.fileList; //删除上传框那里的文件
    //框可见
    switch (e.key) {
      case '1':
        this.setState({
          modalVisible: true,
          fileList:[],
          modalState: this.modalActionState.Insert,
          upOpt: ['OPTION_SAVE'],
          modalForm: false,
          radioValue: '1'
        }
        );
        this.props.form.setFieldsValue({doSave: '1'});
        break;
      case '2':
        this.setState({
          modalVisible: true,
          fileList:[],
          modalState: this.modalActionState.Insert,
          upOpt: [],
          modalForm: false,
          radioValue: '0'
        }
      );
        this.props.form.setFieldsValue({doSave: '0'});
        break;
      default:
        break;
    }
    // this.setState({modalVisible: true, fileList:[], modalState: this.modalActionState.Insert});
  }

  onImageFileChange = (info) =>{
    let fileList = info.fileList;

    if (fileList.length > 1) {
      fileList = fileList.slice(-1); //最多只能有一个文件
    }

    if (info.file.response) {
      fileList = fileList.map((file) => {
        file.url = file.response.data.imgUrl;
        return file;
      });
      let id = info.file.response.data.id;
      this.props.form.setFieldsValue({imageId: id});

      let data = info.file.response.data;
      const wh = data.width + '*' + data.height;
      // 设置别的值
      // this.props.form.setFieldsValue({height: data.height});
      this.props.form.setFieldsValue({width: wh});
      this.props.form.setFieldsValue({imgUrl: data.imgUrl});
      this.props.form.setFieldsValue({key: data.key});
      this.props.form.setFieldsValue({size: data.size});
      

      if (info.file.status === 'removed') {
        this.props.form.setFieldsValue({width:'',imgUrl:'',key:'',size:''});
      }

    }

    this.setState({fileList: fileList});
  }

  preDealTableData = (obj,newObj) => {
    if (obj.imgUrl === '') {
      newObj.thumbnail = '';
      return
    }
    if (!newObj.thumbnail){
      newObj.thumbnail = obj.imgUrl.split('?')[0] + "?imageView2/2/w/60/h/60/q/20";
    }
    newObj.width = obj.width + '*' + obj.height;
  }

  //点击确定，新增之前处理数据，这里因为不需要添加，所以直接进行return null;
  handleData = (data) =>{
    this.setState({ modalVisible: false });
    return data;
  }

}

export default ImageManageInnerTable;
